<template>
	<article class="page page-copybook-builder">
		<h4 class="text-center">字帖生成器</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-4 left">
					<fieldset>
						<legend>参数配置</legend>
						<div class="fieldset-content">
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">字帖类型</div>
								<div class="row-flex-main">
									<select class="form-control" v-model="formData.copybookType">
										<option v-for="(v,i) in copybookTypeList" :key="i" :value="v.value">{{v.label}}</option>
									</select>
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">描字类型</div>
								<div class="row-flex-main">
									<select class="form-control" v-model="formData.traceType">
										<option v-for="(v,i) in traceTypeList" :key="i" :value="v.value">{{v.label}}</option>
									</select>
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">字体名称</div>
								<div class="row-flex-main">
									<!-- <select class="form-control" v-model="formData.fontFamily">
										<option v-for="(v,i) in localFontsList" :key="i" :value="v.postscriptName">{{v.fullName}}</option>
									</select> -->
									<input class="form-control" type="text" v-model="formData.fontFamily" placeholder="请输入已安装的字体名称" />
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">网格大小</div>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="10" :step="1" v-model="formData.gridSize" />
								</div>
								<div class="row-flex-suffix">毫米</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">字体大小</div>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="1" :step="1" v-model="formData.fontSize" />
								</div>
								<div class="row-flex-suffix">毫米</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">透明度</div>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="0" :max="1" :step="0.1" v-model="formData.opacity" />
								</div>
							</div>
							<div class="row-flex" align="center">
								<div class="row-flex-prefix">附加行</div>
								<div class="row-flex-main">
									<input class="form-control" type="number" :min="0" :step="1" v-model="formData.blankRowsCount" />
								</div>
							</div>
							<div class="row-flex textarea-wrapper">
								<div class="row-flex-prefix">文本内容</div>
								<div class="row-flex-main">
									<textarea class="form-control" v-model.trim="formData.content" placeholder="请输入文本内容"></textarea>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-8 right">
					<fieldset>
						<legend>结果预览</legend>
						<div class="fieldset-content">
							<div class="form-group iframe-wrapper">
								<iframe ref="iframe"></iframe>
							</div>
							<div class="form-group">
								<x-button type="primary" block @click="printDoc">打印为PDF</x-button>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
export default {
	name: 'copybook-builder',
	data () {
		return {
			formData: {
				copybookType: 'tracing',
				traceType: 'half',
				fontFamily: '',
				gridSize: 12,
				fontSize: 9,
				opacity: 0.4,
				blankRowsCount: 1,
				content: '',
			},
			// 字帖类型
			copybookTypeList: [
				{label: '描红', value: 'tracing'},
				{label: '临摹', value: 'copying'},
			],
			// 描字类型
			traceTypeList: [
				{label: '不描', value: 'none'},
				{label: '半描', value: 'half'},
				{label: '全描', value: 'all'},
			],
			// 本地字体
			localFontsList: [],
			loadingCount: 0
		}
	},
	computed: {
		iframeContent () {
			let result = ''
			let gridSize = parseFloat(this.formData.gridSize) || 10
			let colCount = Math.floor(180 / gridSize)
			let rowCount = Math.floor(267 / (gridSize + 2))
			let fontSize = parseFloat(this.formData.fontSize) || 10
			let blankRowsCount = parseInt(this.formData.blankRowsCount) || 0
			result = `
			<style>
				* {margin: 0; padding: 0; box-sizing: border-box;}
				.page { width: 210mm; height: 297mm; padding: 15mm; margin: 0 auto; }
				.word {
					float:left; width: ${gridSize}mm; height: ${gridSize}mm; line-height: ${gridSize}mm; font-size: ${fontSize}mm;
					font-family: ${this.formData.fontFamily}; text-align: center; border: 1px solid red; position: relative;
				}
				.word:before {content:"";width:100%;height:0;position:absolute;top:50%;left:0;border-top:1px dashed red;}
				.word:after {content:"";height:100%;width:0;position:absolute;left:50%;top:0;border-left:1px dashed red;}
				.text-opacity {opacity: ${this.formData.opacity};}
				.row {height: ${gridSize}mm;}
				.row + .row {margin-top: 2mm;}
			</style>`
			let rowArr = []
			let rowBlankStr = ''
			let textArr = this.formData.content.split('')
			// 空行字符串
			rowBlankStr = '<div class="row">'
			for (let i = 0; i < colCount; i++) {
				rowBlankStr += `<span class="word"></span>`
			}
			rowBlankStr += `</div>`
			textArr.forEach(v => {
				// 行字符串
				let rowStr = '<div class="row">'
				let rColCount = colCount
				if (this.formData.copybookType === 'tracing') {
					rowStr += `<span class="word">${v}</span>`
					rColCount -= 1
				}
				let index = 0
				if (this.formData.traceType === 'half') {
					index = Math.ceil((colCount - 1) / 2)
				} else if (this.formData.traceType === 'all') {
					index = colCount
				}
				for (let i = 0; i < rColCount; i++) {
					if (i < index) {
						rowStr += `<span class="word"><span class="text-opacity">${v}</span></span>`
					} else {
						rowStr += `<span class="word"></span>`
					}
				}
				rowStr += `</div>`
				rowArr.push(rowStr)
				// 附加行
				for (let i = 0; i < blankRowsCount; i++) {
					rowArr.push(rowBlankStr)
				}
			})
			// 行数校验
			if (rowArr.length === 0) {rowArr.push(rowBlankStr)}
			while (rowArr.length % rowCount) {
				rowArr.push(rowBlankStr)
			}
			// 生成页元素
			let pageCount = rowArr.length / rowCount
			for (let i = 0; i < pageCount; i++) {
				result += `<div class="page">`
				result += rowArr.slice(i * rowCount, (i + 1) * rowCount).join('')
				result += `</div>`
			}
			return result
		}
	},
	watch: {
		iframeContent () {
			this.previewHandler()
		}
	},
	mounted () {
		this.getLocalFonts()
		this.$nextTick(() => {
			this.previewHandler()
		})
	},
	methods: {
		// 获取系统中的中文字体
		getLocalFonts () {
			if (!global.queryLocalFonts) return
			global.queryLocalFonts().then((res) => {
				this.localFontsList = res.filter(v => /[\u4e00-\u9fa5]/.test(v.fullName))
			}).catch(err => {
				this.$toast('本地字体读取失败:' + err)
			})
		},
		// 更新预览结果
		previewHandler () {
			if (!this.$refs.iframe || !this.$refs.iframe.contentDocument) return
			this.$refs.iframe.contentDocument.body.innerHTML = this.iframeContent
		},
		// 打印
		printDoc () {
			if (!this.$refs.iframe || !this.$refs.iframe.contentWindow) return
			this.$refs.iframe.contentWindow.print()
		}
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-copybook-builder {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.left {
			.row-flex {
				.row-flex-prefix {width: 4.5em;}
				& + .row-flex {
					margin-top: .5em;
				}
			}
			.textarea-wrapper {
				flex-grow: 1;
				align-items: stretch;
				textarea {
					display: block;
					height: 100%;
				}
			}
		}
		.right {
			.iframe-wrapper {
				height: 0;
				flex-grow: 1;
				iframe {
					display: block;
					width: 100%;
					height: 100%;
					background-color: #fff;
				}
			}
		}
	}
}
</style>
